<template>
  <div class="teacher_info">
    <custom-title title="用户资料" />
    <el-descriptions
      style="margin-top: 20px; margin-bottom: 20px"
      :column="1"
      border
    >
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">用户ID</div>
        </template>
        {{ props?.data?.user_id }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">教师姓名</div>
        </template>
        {{ props?.data?.real_name }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">联系方式</div>
        </template>
        {{ props?.data?.phone }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">邮箱</div>
        </template>
        {{ props?.data?.email }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">创建时间</div>
        </template>
        {{ props?.data?.created_at }}
      </el-descriptions-item>

      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">最近登录时间</div>
        </template>
        {{ props?.data?.updated_at }}
      </el-descriptions-item>
    </el-descriptions>

    <custom-title title="统计信息" />

    <el-descriptions style="margin-top: 20px" :column="1" border>
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">学生人数</div>
        </template>
        {{ props?.data?.student_num }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">作品总数</div>
        </template>
        {{ props?.data?.works_num }}
      </el-descriptions-item>
      <el-descriptions-item label-class-name="desc_label_120">
        <template #label>
          <div class="cell-item">优秀作品数</div>
        </template>
        {{ props?.data?.fine_works_num }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

// 接收父组件的props
const props = defineProps<{
  data?: any;
}>();

// 计算学生人数
const countFn = (_list) => {
  // 学生人数
  let studentCount = 0;
  // 作品总数
  let workCount = 0;
  // 优秀作品数
  let goodWorkCount = 0;

  _list.forEach((item) => {
    studentCount += item.student_num;
    workCount += item.works_num;
    goodWorkCount += item.good_work_count;
  });
};

console.log("datadata", props?.data);
</script>

<style scoped>
.cell-item {
  display: flex;
  align-items: center;
}

.teacher_info {
  background: white;
  padding: 20px;
}
</style>
